{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-80px{width: 80px;}
	.el-upload-list{width: 30%;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

  <el-form-item label="广告名称" prop="title">
    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title"></el-input>
  </el-form-item>

  <el-form-item label="客户端" prop="selected_app_id">
	<el-select v-model="selected_app_id" clearable placeholder="请选择客户端"
    	class="col-12 col-sm-3 pl-0 pr-0">
		<el-option
		  :key="null"
		  label="全部"
		  :value="null">
		</el-option>
		<el-option
		  v-for="item in app_list"
		  :key="item.app_id"
		  :label="item.app_name"
		  :value="item.app_id">
		</el-option>
	</el-select>
  </el-form-item>

  <el-form-item label="广告位" prop="id">
	<el-select v-model="form.pid" placeholder="广告位" filterable
    	class="col-12 col-sm-3 pl-0 pr-0">
		<el-option
		  v-for="item in ads_position_list"
		  v-if="!selected_app_id||selected_app_id===item.app_id"
		  :key="item.id"
		  :label="item.app_name+'-'+item.title"
		  :value="item.id">
		</el-option>
	</el-select>
  </el-form-item>

  <el-form-item label="图片路径" prop="path">
    <el-input v-model="form.path" class="col-12 col-sm-3 pl-0 pr-0" placeholder="使用上传功能上传图片或直接填入图片路径"></el-input>
  </el-form-item>

  <el-form-item label="上传" prop="path">
	  <el-image
	  	v-if="imgUrl" 
	  	class="mw-200px mh-200px"
	    :src="imgUrl"
	    :preview-src-list="[imgUrl]">
	  </el-image>
  	  <el-upload
		  action="/uploadFiles"
		  name="file"
		  ref="upload"
		  :data="{path:'ads/image'}"
		  accept="image/*"
		  show-file-list
		  :on-success="handleFilesSuccess"
		  :on-error="handleFilesError"
		  :on-remove="handleFilesRemove"
		  :auto-upload="false">
			  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			  <el-button size="small" class="mr-3" type="success" @click="submitUpload">上传</el-button>
			  <div slot="tip" class="el-upload__tip">文件不超过5M</div>
	  </el-upload>
  </el-form-item>

  <el-form-item label="链接" prop="url">
    <el-input v-model="form.url" class="col-12 col-sm-3 pl-0 pr-0" placeholder="URL"></el-input>
  </el-form-item>

  <el-form-item label="排序" prop="sort">
    <el-input v-model="form.sort" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Sort" maxlength="4"></el-input>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">正序，值越小越靠前</p>
  	</small>
  </el-form-item>

  <el-form-item label="数量" prop="col">
	<el-input-number v-model="form.col" :step="1" step-strictly :min="1" :max="12"></el-input-number>
	<div class="row pt-2 w-50 mx-0 text-white text-center">
		<div class="bg-primary" :class="'col-'+form.col">{{form.col}}/12</div>
		<div class="col bg-secondary">{{form.col==12?12:12-form.col}}/12</div>
	</div>
  	<p class="text-muted small mb-0">仅支持部分位置</p>
  </el-form-item>

  <el-form-item label="背景颜色" prop="bg_color">
    <el-color-picker v-model="form.bg_color"></el-color-picker>
  </el-form-item>

  <el-form-item label="状态" prop="status">
    <el-radio-group v-model="form.status">
      <el-radio :label="1">启用[默认]</el-radio>
      <el-radio :label="0">禁用</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="广告标识符" prop="ads_icon">
    <el-radio-group v-model="form.ads_icon">
      <el-radio :label="1">有[默认]</el-radio>
      <el-radio :label="0">无</el-radio>
    </el-radio-group>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">右下角广告标识符</p>
  	</small>
  </el-form-item>

  <el-form-item label="开始时间" prop="start_time">
    <el-date-picker
      v-model="form.start_time"
      align="right"
      type="date"
      format="yyyy-M-d"
      value-format="yyyy-M-d"
      placeholder="选择日期"
      :default-value="Date.now()"
      :picker-options="{
	        	disabledDate: (time) => {return time.getTime() < Date.now();}
	        }">
    </el-date-picker>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">为空则手动控制</p>
  	</small>
  </el-form-item>

  <el-form-item label="结束时间" prop="end_time">
    <el-date-picker
      v-model="form.end_time"
      align="right"
      type="date"
      placeholder="选择日期"
      format="yyyy-M-d"
      value-format="yyyy-M-d"
      :default-value="Date.now()"
      :picker-options="{
      	disabledDate: (time) => {return time.getTime() < Date.now();}
      }">
    </el-date-picker>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">为空则手动控制</p>
  	</small>
  </el-form-item>

  <el-form-item label="关联地区" prop="area">
    <el-cascader 
    	class="col-12 col-sm-3 pl-0 pr-0"
    	v-model="form.area"
    	placeholder="试试搜索：北京"
    	filterable
		:props="defaultProps"
    	:options="area">
    </el-cascader>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">设置关联地区之后分站可通过关联地区，城市自动获取相应的数据</p>
  	</small>
  </el-form-item>

  <el-form-item label="关联行业" prop="industry">
	  <el-select v-model="form.industry" filterable clearable default-first-option placeholder="试试搜索：互联网" class="col-12 col-sm-3 pl-0 pr-0">
	    <el-option
	      v-for="item in industry"
	      :key="item.id"
	      :label="item.title"
	      :value="item.id">
	    </el-option>
		</el-select>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">设置关联行业之后分站可通过关联行业自动获取相应的数据</p>
  	</small>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="app_list"}
	var app_list=[];
	{else/}
	var app_list={:json_encode($app_list,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="ads_position_list"}
	var ads_position_list=[];
	{else/}
	var ads_position_list={:json_encode($ads_position_list,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="area"}
	var area=[];
	{else/}
	var area={:json_encode($area,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="industry"}
	var industry=[];
	{else/}
	var industry={:json_encode($industry,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var url='/ads/add/{$id}';
	var is_edit=false;
	var formData={
				title:'',
				pid:{$id},
				sort:9999,
				path:'',
				url:'',
				status:1,
				ads_icon:1,
				col:12,
				start_time:'',
				end_time:'',
				industry:'',
				bg_color:'',
				area:[],
			};
	{else/}
	var url='/ads/edit/{$Find.id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	if (formData.province&&formData.city&&formData.area) {
		formData.area=[formData.province,formData.city,formData.area];
	}else{
		formData.area=[];
	}
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			selected_app_id:null,
			view:XYBase.view,
			labelPosition:'right',
			industry: industry,
			area: area,
			form:formData,
			is_edit:is_edit,
			app_list:app_list,
			ads_position_list:ads_position_list,
	      	defaultProps: {
	        	value: 'id',
	        	label: 'title',
	        	children: 'data'
	      	},
    	imgUrl:'',
      rules: {
        path: [
          { required: true, message: '请上传图片', trigger: 'change' },
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ],
      }
		},
		watch:{
		    view:XYBase.viewWatch,
			form:{
				handler(val,oldVal){
					if (val.path) {
						this.imgUrl='{:config('web.imgurl')}'+val.path;
					}else{
						this.imgUrl='';
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
		},
		methods:{
		    submitUpload() {
		        this.$refs.upload.submit();
		    },
		    handleFilesRemove(){
		    	var _this=this;
				_this.form.path='';
		    },
			handleFilesSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'ads/image'){
							this.form.path=res.data.path;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleFilesError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									_this.$refs.upload.clearFiles();
									if(!_this.is_edit){
										_this.resetForm(formName);
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}